<template>
	<view class="search">
		<muscihead title="搜索" :blackStyle="true"></muscihead>
		<view class="container">
			<scroll-view scroll-y>
				<!-- 顶部歌曲搜索区域 -->
				<view class="search-search">
					<text class="iconfont icon-fangdajing"></text>
					<input type="text" placeholder="搜索歌曲" v-model="searchWord" @confirm="handleTosearch(searchWord)" @input="handleToSuggest"/>
					<text v-show="searchType !== 1" class="iconfont icon-guanbi" @tap="handleToClose"></text>
				</view>
				<block v-if="searchType == 1">
					<!-- 历史搜索记录区域 -->
					<view class="search-history">
						<!-- 顶部描述 -->
						<view class="search-history-head">
							<text>历史记录</text>
							<text class="iconfont icon-lajitong" @tap="handleToClear"></text>
						</view>
						<!-- 历史歌曲 -->
						<view class="search-history-list">
							<view v-for="(item, index) in searchHistory" :key="index" @tap="handleToWord(item)">{{ item }}</view>
						</view>
					</view>
					<!-- 热搜榜区域 -->
					<view class="search-hot">
						<view class="search-hot-head">热搜榜</view>
						<view
							class="search-hot-item"
							v-for="(item, index) in searchHot"
							:key="index"
							@tap="handleToWord(item.searchWord)"
						>
							<view class="search-hot-top">{{ index + 1 }}</view>
							<view class="search-hot-word">
								<view>
									{{ item.searchWord }}
									<image :src="item.iconUrl" mode="aspectFit"></image>
								</view>
								<view>{{ item.content }}</view>
							</view>
							<text class="search-hot-count">{{ item.score }}</text>
						</view>
					</view>
				</block>
				<block v-else-if="searchType == 2">
					<view class="search-result">
						<view class="search-result-item" v-for="(item, index) in searchList" :key="index" @tap="handleToDetail(item.id)">
							<view class="search-result-word">
								<view>{{ item.name }}</view>
								<view>{{ item.artists[0].name }} - {{ item.album.name }}</view>
							</view>
							<text class="iconfont icon-bofang"></text>
						</view>
					</view>
				</block>
				<block v-else-if="searchType == 3">
					<view class="search-suggest">
						<view class="search-suggest-title">
							搜索“{{searchWord}}”
						</view>
						<view class="search-suggest-item" v-for="(item, index) in searchSuggest" :key="index" @tap="handleToWord(item.keyword)">
							<text class="iconfont icon-fangdajing"></text>
							{{item.keyword}}
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { searchHot, searchSuggest, searchWord } from '../../common/api.js'
export default {
	data() {
		return {
			searchHot: [],
			searchWord: '',
			searchHistory: [],
			searchType: 1,
			searchList: [],
			searchSuggest: [],
		}
	},
	async onLoad() {
		const res = await searchHot()
		// console.log(res)
		if (res[1].data.code === 200) {
			this.searchHot = res[1].data.data
		}
		// console.log(this.searchHot)
		if (uni.getStorageSync('searchHistory')) {
			this.searchHistory = uni.getStorageSync('searchHistory')
		}
	},
	methods: {
		handleToWord(word) {
			this.searchWord = word
			this.handleTosearch(word)
		},
		handleTosearch(word) {
			this.searchHistory.unshift(word)
			this.searchHistory = [...new Set(this.searchHistory)]
			if (this.searchHistory.length > 10) {
				this.searchHistory.length = 0
			}
			uni.setStorageSync('searchHistory', this.searchHistory)
			this.getSearchList(word)
			
		},
		handleToClear() {
			uni.removeStorage({
				key: 'searchHistory',
				success: () => {
					this.searchHistory = []
				}
			})
		},
		async getSearchList(word) {
			const res = await searchWord(word)
			if(res[1].data.code === 200) {
				this.searchList = res[1].data.result.songs;
				this.searchType = 2;
			}
		},
		handleToClose() {
			this.searchWord = ''
			this.searchType = 1
		},
		handleToDetail(songId) {
			// console.log(songId)
			uni.navigateTo({
				url: '../detail/detail?songId=' + songId,
			})
		},
		async handleToSuggest(event) {
			
			const value = event.detail.value
			if(!value) {
				this.searchType = 1
				return
			}
			const res = await searchSuggest(value)
			if(res[1].data.code == 200) {
				this.searchSuggest = res[1].data.result.allMatch;
				this.searchType = 3
			}
		}
	}
}
</script>

<style lang="less" scoped>
.search-search {
	display: flex;
	align-items: center;
	height: 70rpx;
	margin: 70rpx 30rpx 50rpx;
	background-color: #f7f7f7;
	border-radius: 50rpx;
	text {
		font-size: 26rpx;
		margin-right: 26rpx;
		margin-left: 28rpx;
	}
	input {
		flex: 1;
		font-size: 28rpx;
	}
}

.search-history {
	margin: 0 30rpx 40rpx;
	font-size: 26rpx;
	.search-history-head {
		display: flex;
		justify-content: space-between;
		margin-bottom: 36rpx;
	}
	.search-history-list {
		display: flex;
		flex-wrap: wrap;
		view {
			padding: 16rpx 28rpx;
			border-radius: 40rpx;
			margin: 0 30rpx 30rpx 0;
			background-color: #f7f7f7;
		}
	}
}

.search-hot {
	margin: 0 30rpx;
	font-size: 26rpx;
	.search-hot-head {
		margin-bottom: 36rpx;
	}
	.search-hot-item {
		display: flex;
		align-items: center;
		margin-bottom: 58rpx;
		.search-hot-top {
			color: #fb2222;
			width: 60rpx;
			margin-left: 8rpx;
		}
		.search-hot-word {
			flex: 1;
			image {
				width: 48rpx;
				height: 22rpx;
			}
			view:nth-child(1) {
				font-size: 30rpx;
				color: #000;
			}
			view:nth-child(2) {
				font-size: 24rpx;
				color: #878787;
			}
		}
		.search-hot-count {
			color: #878787;
		}
	}
}

.search-result {
	border-top: 2rpx solid #e4e4e4;
	padding: 30rpx;
	.search-result-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		border-bottom: 2rpx solid #e4e4e4;
		.search-result-word {
			
			view:nth-child(1) {
				font-size: 28rpx;
				color: #235790;
				margin-bottom: 12rpx;
			}
			view:nth-child(2) {
				font-size: 22rpx;
				color: #898989;
			}
		}
		text {
			font-size: 50rpx;
		}
	}
}

.search-suggest {
	border-top: 2rpx solid #e4e4e4;
	padding: 30rpx;
	font-size: 26rpx;
	.search-suggest-title {
		color: #4574a5;
		margin-bottom: 74rpx;
	}
	.search-suggest-item {
		color: #5d5d5d;
		margin-bottom: 74rpx;
		text {
			color: #bdbdbd;
			margin-right: 28rpx;
		}
	}
	
}
</style>
